<template>
    <view :style="{ '--color': color }">
        <status-bar title="预约"></status-bar>
        <view class="info">
            <view class="d-flex">
                <image :src="$imgUrls(pageData.goods_img)" mode="aspectFill" class="goods_img"></image>
                <view class="Box">
                    <text class="goods_name ellipsis">{{ pageData.goods_name }}</text>
                    <view class="goodTips" v-if="pageData.classify_tag && pageData.classify_tag.length">
                        <view class="TipsLi" v-for="(item, index) in pageData.classify_tag.slice(0, 3)" :key="index">{{ item }}</view>
                    </view>
                    <text class="goods_info ellipsis">{{ pageData.goods_info }}</text>
                    <view class="row j-sb a-center">
                        <u-rate :count="5" v-model="pageData.star" readonly allowHalf :gutter="0" inactiveColor="#cecece" activeColor="#FF3355"></u-rate>
                        <text class="color_66 h6">累计服务：{{ pageData.sales_number }}</text>
                    </view>
                </view>
            </view>

            <view class="Tips">{{ tips }}</view>
        </view>

        <view class="DataBox">
            <!--  <view class="Tab">
                <block v-for="(item, index) in Tabs" :key="index">
                    <view class="tabs" :class="{ Active: current == index }" @click="tabs(item, index)">
                        <image :src="$staticImg(item.img)" mode="widthFix" class="wh" v-if="current == index"></image>
                        <text class="tabs_name">{{ item.name }}</text>
                    </view>
                </block>
            </view> -->
            <view class="Form">
                <view class="list">
                    <text class="Name">联系人</text>
                    <input type="text" placeholder="请输入联系人" placeholder-class="place" class="Input" v-model="name" />
                </view>
                <view class="list">
                    <text class="Name">联系电话</text>
                    <input type="tel" maxlength="11" placeholder="请输入联系电话" placeholder-class="place" class="Input" v-model="tel" />
                </view>
                <view class="address">
                    <textarea v-model="address" class="addressInfo" :maxlength="-1" auto-height placeholder="请输入服务地址" placeholder-class="place" />
                    <view class="iconfont icon-wodedizhi1 black size50" @click="chooseLocation"></view>
                </view>
                <view class="Time" @click="show = true">
                    <input type="text" class="TimeData" v-model="service_time" disabled placeholder="请选择时间" placeholder-class="place" />
                    <view class="iconfont icon-a-zu1306 size48 black"></view>
                </view>
                <view class="remark">
                    <textarea v-model="remark" class="remarkText" :maxlength="-1" auto-height :placeholder="pageData.remark_text" placeholder-class="place" />
                </view>

                <view class="attachment">
                    <text class="color_33 size28">{{ pageData.img_text }}</text>
                    <view class="attach">
                        <view class="list" v-for="(item, index) in attachment" :key="index" @click="$common.previewImgs(index, attachment)">
                            <image :src="$imgUrls(item)" mode="aspectFill" class="wh bor_radius_10"></image>
                            <view class="close" @click.stop="Del(index)">
                                <view class="iconfont icon-guanbi1"></view>
                            </view>
                        </view>
                        <view class="list" @click="UploadImg">
                            <image :src="$staticImg('uploadImg.png')" mode="aspectFill" class="uploadImg"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="footer">
            <view class="Box">
                <view class="list Cancel" @click="$back()">取消预约</view>
                <view class="list Config" @click="appointment">提交预约</view>
            </view>
        </view>

        <u-datetime-picker @cancel="show = false" @confirm="confirm" :show="show" :minDate="minDate" v-model="value1" mode="date"></u-datetime-picker>
    </view>
</template>

<script>
    import { mapState } from 'vuex';

    import Api from '@/common/Api.js';
    export default {
        data() {
            return {
                title: '',
                pageData: '',
                Tabs: [
                    {
                        name: '我是业主',
                        img: 'tab01.png',
                        guest_type: 2
                    },
                    {
                        name: '我是商家',
                        img: 'tab02.png',
                        guest_type: 1
                    }
                ],
                guest_type: 2,
                name: '',
                tel: '',
                address: '',
                service_time: '',
                remark: '',
                attachment: [],
                current: 0,
                show: false,
                minDate: Number(new Date()),
                value1: Number(new Date())
            };
        },
        async onLoad(opt) {
            if (opt.goods_id) this.goods_id = opt.goods_id;
            const result = await Api.singleDetails(this.goods_id);
            this.pageData = result;
            if (this.userInfo) {
                this.name = this.userInfo.nickname;
                this.tel = this.userInfo.phone;
            }
        },
        methods: {
            appointment() {
                if (!this.name) return this.$Toast('请输入姓名');
                if (!this.tel) return this.$Toast('请输入联系电话');
                if (this.tel && !this.$reg.phone.test(this.tel)) return this.$Toast('电话输入有误');
                if (!this.address) return this.$Toast('请输入服务地址');
                if (!this.service_time) return this.$Toast('请选择时间');
                this.$http
                    .post({
                        url: '/orderRepairApi/createRepairOrder',
                        data: {
                            goods_id: this.goods_id,
                            // guest_type: this.guest_type,
                            name: this.name,
                            tel: this.tel,
                            address: this.address,
                            service_time: this.service_time,
                            remark: this.remark,
                            attachment: this.attachment.join(',')
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        this.toUrl(`orderDetails?id=${res.data}`);
                    });
                console.log(11);
            },

            tabs(Item, Index) {
                this.current = Index;
                this.guest_type = Item.guest_type;
            },
            confirm(e) {
                const Time = this.formatTimestamp(e.value);
                this.value1 = e.value;
                this.service_time = Time;
                this.show = false;
            },
            chooseLocation() {
                uni.chooseLocation({
                    success: (res) => {
                        this.address = res.address;

                        console.log(res);
                    },
                    complete: (com) => {
                        // console.log(com);
                    }
                });
            },
            async UploadImg() {
                const Result = await this.$common.chooseImage(9);
                this.attachment = [...this.attachment, ...Result];
                console.log(Result, 'chooseImage');
            },
            Del(Index) {
                this.attachment.splice(Index, 1);
            },
            formatTimestamp(timestamp) {
                // 创建 Date 对象
                const date = new Date(timestamp);

                // 获取年、月、日、小时、分钟
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');

                // 拼接成目标格式
                return `${year}-${month}-${day}`;
                // return `${year}-${month}-${day} ${hours}:${minutes}`;
            }
        },
        computed: {
            ...mapState(['tips', 'color', 'userInfo'])
        }
    };
</script>
<style lang="scss">
    page {
        background-color: $bgF8;
        padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
    }
</style>
<style lang="scss" scoped>
    .info {
        width: 700rpx;
        background-color: #fff;
        padding: 24rpx;
        margin: 24rpx auto 0;
        border-radius: 16rpx;

        .goods_img {
            width: 178rpx;
            height: 178rpx;
            border-radius: 10rpx;
            margin-right: 22rpx;
        }
        .Box {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .goods_name {
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
            }
            .goodTips {
                display: flex;
                .TipsLi {
                    background-color: var(--color);
                    font-size: 20rpx;
                    color: #fff;
                    padding: 4rpx 10rpx;
                    margin-right: 10rpx;
                }
            }
            .goods_info {
                color: #333333;
                font-size: 24rpx;
            }
        }
        .Tips {
            background-color: #fff1f3;
            padding: 24rpx;
            border-radius: 16rpx;
            color: #ff3355;
            font-size: 24rpx;
            margin-top: 24rpx;
            line-height: 40rpx;
        }
    }
    .DataBox {
        width: 700rpx;
        padding-bottom: 50rpx;
        padding-top: 20rpx;
        margin: 24rpx auto 0;
        background-color: #fff;
        border-radius: 36rpx;
        overflow: hidden;
        .Tab {
            width: 100%;
            height: 72rpx;
            display: flex;
            align-items: center;
            background-color: #ebeef5;
            position: relative;
            .tabs {
                flex: 1;
                height: 100%;
                position: relative;
                .tabs_name {
                    color: #000;
                    font-size: 28rpx;
                    font-weight: 500;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            .Active {
                .tabs_name {
                    color: var(--color);
                }
            }
        }
        .Form {
            width: 100%;
            padding: 0 32rpx;
        }
        .list {
            width: 100%;
            border-bottom: 1px solid #eaeaea;
            margin-top: 20rpx;
            display: flex;
            flex-direction: column;
            .Name {
                color: #000;
                font-size: 24rpx;
            }
            .Input {
                width: 100%;
                height: 90rpx;
                color: #000;
                font-size: 28rpx;
            }
        }
        .address {
            width: 100%;
            border-bottom: 1px solid #eaeaea;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            .addressInfo {
                flex: 1;
                height: 100rpx;
                font-size: 28rpx;
            }
            .icon-wodedizhi1 {
                padding: 20rpx 0 20rpx 30rpx;
            }
        }
        .Time {
            width: 100%;
            height: 100rpx;
            border-bottom: 1px solid #eaeaea;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            box-sizing: border-box;
            .TimeData {
                flex: 1;
                font-size: 28rpx;
                color: #000;
            }
        }
        .remark {
            width: 100%;
            min-height: 100rpx;
            border-bottom: 1px solid #eaeaea;
            margin-top: 20rpx;
            display: flex;
            align-items: center;
            padding-bottom: 20rpx;
            .remarkText {
                width: 100%;
                height: 100%;
                font-size: 28rpx;
                color: #000;
            }
        }

        .attachment {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 20rpx;
            .attach {
                width: 100%;
                // margin-top: 20rpx;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10rpx;
                .list {
                    width: 184rpx;
                    height: 184rpx;
                    background-color: #f2f2f2;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 10rpx;
                    overflow: hidden;
                    position: relative;
                    border: 1px solid #f2f2f2;
                    .uploadImg {
                        width: 80rpx;
                        height: 80rpx;
                    }
                    .close {
                        width: 36rpx;
                        height: 36rpx;

                        position: absolute;
                        top: 10rpx;
                        right: 10rpx;
                        background-color: #ff3355;
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .icon-guanbi1 {
                            color: #fff;
                            font-size: 20rpx;
                        }
                    }
                }
            }
        }
    }
    .place {
        color: #999;
        font-size: 28rpx;
    }
    .footer {
        width: 100%;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
        padding-bottom: env(safe-area-inset-bottom);
        .Box {
            width: 100%;
            height: 124rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .list {
                width: 340rpx;
                height: 96rpx;
                border-radius: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 32rpx;
            }
            .Cancel {
                background-color: #eaeaea;
                color: #666666;
            }
            .Config {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
</style>
